<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/cascader.css" media="all">
</head>
<body>
<%--不解析的添加按钮--%>
<script type="text/html" id="toolbar">
    <button onclick="openAddForm()" class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon layui-icon-addition"></i></button>
    <button onclick="openUploadForm()" class="layui-btn layui-btn-primary layui-btn-xs">全部上传</button>
    <a href="${pageContext.request.contextPath}/downloadExcel" class="layui-btn layui-btn-primary layui-btn-xs">全部下载</a>
</script>
<%--不解析的更新和删除按钮--%>
<script type="text/html" id="operation">
    <button class="layui-btn layui-btn-xs" lay-event="edit">更新</button>
    <button class="layui-btn layui-btn-xs" lay-event="delete">删除</button>
</script>
<%--不解析的添加模态框--%>
<script id="addForm" type="text/html">
    <form class="layui-form" action="" lay-filter="addForm">
        <div class="layui-form-item">
            <label class="layui-form-label">品牌名</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">首字母</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="firstLetter" required  lay-verify="required" placeholder="请输入首字母" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="sort" required  lay-verify="required" placeholder="请输入排序" autocomplete="off" class="layui-input">
            </div>
        </div>
        <%--状态 0 未删除--%>
        <input type="hidden" name="showStatus" value="0">
        <div class="layui-form-item">
            <label class="layui-form-label">Logo</label>
            <div class="layui-input-block" style="width:200px">
                <input id="addLogo" type="hidden" name="logo" required  lay-verify="required" autocomplete="off" class="layui-input">
                <img id="img1" style="width: 30px" hidden="true"/>
                <button type="button" class="layui-btn" id="addUpload">
                    <i class="layui-icon layui-icon-upload"></i>上传图片
                </button>
            </div>
        </div>
    </form>
</script>


<%--不解析的上传按钮--%>
<script id="uploadExcel" type="text/html">
    <form class="layui-form" action="" lay-filter="uploadExcelForm">
        <div class="layui-form-item">
            <label class="layui-form-label">Logo</label>
            <div class="layui-input-block" style="width:200px">
                <button type="button" class="layui-btn" id="addExcel">
                    <i class="layui-icon layui-icon-upload"></i>上传.xls格式文件
                </button>
            </div>
        </div>
    </form>
</script>


<%--不解析的更新模态框--%>
<script id="updateForm" type="text/html">
    <form class="layui-form" action="" lay-filter="updateForm">
        <input type="hidden" name="brandId">
        <input type="hidden" name="oldCategoryName" id="oldCategoryName">
        <div class="layui-form-item">
            <label class="layui-form-label">品牌名</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">首字母</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="firstLetter" required  lay-verify="required" placeholder="请输入首字母" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="sort" required  lay-verify="required" placeholder="请输入排序" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">Logo</label>
            <div class="layui-input-block" style="width:200px">
                <input id="logo" type="hidden" name="logo" required  lay-verify="required" autocomplete="off" class="layui-input">
                <img id="img2" style="width: 30px" hidden="true"/>
                <button type="button" class="layui-btn" id="updateUpload">
                    <i class="layui-icon layui-icon-upload"></i>上传图片
                </button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类别名</label>
            <div class="layui-input-block">
                <input type="text" id="a" class="layui-input" readonly="readonly" name="categoryName"/>
            </div>
        </div>
    </form>
</script>



<%--生成表格的标签--%>
<table id="pmsBrand" lay-filter="pmsBrand"></table>


<%--动态生成表格--%>
<script>
    layui.use("table",function(){
        var table = layui.table;
        table.render({
            id:"pmsBrand",
            elem:"#pmsBrand",
            cols:[[
                {field:"brandId",title:"编号",sort:true},
                {field:"name",title:"品牌名"},
                {field:"firstLetter",title:"首字母"},
                {field:"sort",title:"排序"},
                {field:"showStatus",title:"状态",templet:function(d){

                        console.log(d);//包含一行的数据
                        return d.sex == 1 ? "已删除":"未删除";
                    }},
                {field:"logo",title:"logo",templet:'<div><img  src="\n' +
                        '{{ d.logo }}"></div>'},
                {field:"brandStory",title:"品牌故事"},
                {field:"categoryName",title:"类别名"},
                {title:"操作",toolbar:"#operation"}//操作列
            ]],
            url:"${pageContext.request.contextPath}/pmsBrands/showAll",
            page:true,//开启分页
            limits:[5,10,20],//每页条数的选择项
            limit:5//每页显示的条数，默认：10
            ,toolbar:"#toolbar"//2 显示删除按钮
        });
    })
</script>





<%--为添加按钮添加功能--%>
<script type="text/javascript">


    //执行弹出弹出层的代码
    function openAddForm(){
        layui.use(["layer","form","upload","table"],function(){

            var layer = layui.layer;
            var $ = layui.jquery;
            var form = layui.form;
            var upload=layui.upload;
            var table=layui.table;
            layer.open({
                type:1,
                content:$("#addForm").html(),
                btn:["添加","取消"],
                success:function(){
                    //在弹出层弹出成功后调用
                    var uploadInst = upload.render({
                        elem: '#addUpload' //绑定元素
                        ,url: '${pageContext.request.contextPath}/file/ossUpload' //上传接口
                        ,field: "pic"//设置上传的参数名
                        ,done: function(res){
                            //上传完毕回调
                            console.log(res);
                            $("#img1").prop("src", "${pageContext.request.contextPath}"+res.path);
                            $("#img1").prop("hidden",false);
                            $("#addLogo").val(res.path);
                            layer.alert("上传成功！");
                        }
                        ,error: function(){
                            //请求异常回调
                        }
                    });

                },
                yes:function(index,layobj){
                    console.log(index);
                    console.log(layobj);
                    //获取表单中所有的数据
                    var o =  form.val("addForm");
                    console.log(o);

                    $.ajax({
                        "url":"${pageContext.request.contextPath}/pmsBrands",
                        "data":JSON.stringify(o),
                        "type":"post",
                        "contentType":"application/json",
                        "dataType":"json",
                        "success":function(result){
                            if (result.status == "success") {
                                layer.alert("添加成功！");

                                layer.close(index);
                                table.reload("pmsBrand");
                            }
                        }
                    })
                }
            });
        })
    }
</script>

<script>
    layui.use("table",function(){
        var table = layui.table;
        //监听表格的工具按钮的事件
        table.on("tool(pmsBrand)",function(obj){
            console.log(obj.data);
            if(obj.event == "edit"){
                //更新操作
                //弹出弹出层
                var $ = layui.jquery;
                layui.use(["layer","form","upload"],function(){
                    var layer = layui.layer;
                    var form = layui.form;
                    var upload=layui.upload;
                    layer.open({
                        type:1,
                        content:$("#updateForm").html(),
                        success:function(){

                            //将数据回填到表单中
                            form.val("updateForm",obj.data);
                            $("#oldCategoryName").val(obj.data.categoryName);
                            $("#img2").prop("src","${pageContext.request.contextPath}"+obj.data.logo);
                            // laydate.render

                            /*给id为a的输入框变成级联下拉菜单*/
                            layui.config({
                                base: "${pageContext.request.contextPath}/js/"
                            }).use(['form',"jquery","cascader","form"], function(){
                                var $ = layui.jquery;
                                var cascader = layui.cascader;
                                var data;
                                $.ajax({
                                    url: "${pageContext.request.contextPath}/categories/categoryList",
                                    success: function (result) {
                                        data=result.data;
                                        console.log(data);
                                        var cas=cascader({
                                            elem: "#a",
                                            data: data,
                                            // url: "/aa",
                                            // type: "post",
                                            // triggerType: "change",
                                            showLastLevels: true,
                                            // where: {
                                            //     a: "aaa"
                                            // },
                                            // changeOnSelect: true,
                                            success: function (valData,labelData) {
                                                console.log(valData,labelData);
                                            }
                                        });
                                    }
                                });




                            });








                            var uploadInst = upload.render({
                                    elem: '#updateUpload' //绑定元素
                                    ,url: '${pageContext.request.contextPath}/file/ossUpload' //上传接口
                                    ,field: "file"//设置上传的参数名
                                    ,done: function(res) {
                                    //上传完毕回调
                                    console.log(res);
                                    $("#img2").prop("src", res.path);
                                    $("#img2").prop("hidden", false);
                                    $("#logo").val(res.path);
                                    layer.alert("上传成功！");
                                }


                            })

                        },
                        btn:["更新","取消"],
                        yes:function(index,layobj){
                            console.log(index);
                            console.log(layobj);

                            var updateData = form.val("updateForm");
                            console.log(updateData);
                            $.ajax({
                                "url":"${pageContext.request.contextPath}/pmsBrands",
                                "type":"put",
                                "data":JSON.stringify(updateData),
                                "contentType":"application/json",
                                "dataType":"json",
                                "success":function(result){
                                    console.log(result);
                                    layer.close(index);
                                    table.reload("pmsBrand");

                                }
                            })
                        }
                    })
                })


            }else if(obj.event == "delete"){
                var $=layui.jquery;
                //执行删除操作
                $.ajax({
                    "url":"${pageContext.request.contextPath}/pmsBrands/"+obj.data.brandId,
                    "type":"delete",
                    "dataType":"json",
                    "success":function(result){
                        console.log(result);

                        table.reload("pmsBrand");

                    }
                })
            }
        })
    })
</script>


<%--为上传Excel按钮添加功能--%>
<script type="text/javascript">


    //执行弹出弹出层的代码
    function openUploadForm(){
        layui.use(["layer","form","upload","table"],function(){

            var layer = layui.layer;
            var $ = layui.jquery;
            var form = layui.form;
            var upload=layui.upload;
            var table=layui.table;
            layer.open({
                type:1,
                content:$("#uploadExcel").html(),
                btn:["关闭"],
                success:function(){
                    //在弹出层弹出成功后调用
                    var uploadInst = upload.render({
                        elem: '#addExcel' //绑定元素
                        ,url: '${pageContext.request.contextPath}/uploadExcel' //上传接口
                        ,accept: 'file'
                        ,field: "file"//设置上传的参数名
                        ,done: function(res){
                            //上传完毕回调
                            if (res.status=="success"){
                                layer.alert("批量上传成功！");
                            }

                        }
                        ,error: function(){
                            //请求异常回调
                        }
                    });

                },
                yes:function(index,layobj){
                    table.reload("pmsBrand");
                    layer.close(index);
                }
            });
        })
    }

    /*function downloadExcel() {
        layui.use("layer",function () {
            var layer = layui.layer;
            var $ = layui.jquery;
            $.ajax({
                url: "${pageContext.request.contextPath}/downloadExcel",
                /!*success: function (result) {
                    if (result.status=="success"){
                        layer.alert("下载成功！");
                    }
                }*!/
            })
        })
    }*/
</script>






</body>
</html>